import { RouteLocationNormalizedLoadedGeneric, RouteRecordRaw } from 'vue-router'
import { Tabs, TabItem } from '../types'

export const useTabsStore = defineStore(
    STORE_TABS,
    () => {
        const tabs = reactive<Tabs>({
            // 当前tab是否全屏
            isFullscreen: false,
            // 激活的tab
            activetabPath: '',
            // tab列表
            tabsArr: [],
        })
        // 刷新
        const setFullScreen = () => {
            tabs.isFullscreen = !tabs.isFullscreen
        }
        // 初始化Tag
        const initTabs = (): string => {
            // 如果本地tab数组存在且长度大于0，则不需要初始化
            if (tabs.tabsArr.length > 0) {
                return tabs.activetabPath
            }
            // 获得isAffis属性为true的路由
            const route = _getChildren(constRoutes)
            if (!route) return ''
            // 设置激活tab
            tabs.activetabPath = route.path as string
            // 如果存在则添加
            _addTab(route)
            return route.path
        }
        // 添加tab
        const addTab = (route: RouteLocationNormalizedLoadedGeneric) => {
            // 设置激活tab
            tabs.activetabPath = route.path as string
            // 如果tag数组中已经包含当前路由, 则将其移除后重新添加, 方便关闭了激活tag后，路由回退使用
            const currentTabIndex = tabs.tabsArr.findIndex((item) => item.path === route.path)
            if (currentTabIndex >= 0) {
                const currentTab = tabs.tabsArr.splice(currentTabIndex, 1)[0]
                tabs.tabsArr.push(currentTab)
                return
            }
            // 如果tag数组中不包含当前路由，则添加
            _addTab(route)
        }
        // 移除当前
        const removeCurrent = (currentTabPath: unknown): string => {
            //移除当前tab
            tabs.tabsArr = tabs.tabsArr.filter((item) => item.path !== currentTabPath)
            // 确定激活的tab还在不在，在的返回 ''，不在的话返回tab数组的最后一个tab的path
            return _validateActiveTab()
        }
        // 移除左侧
        const removeLeft = (currentTabPath: string): string => {
            // 获得当前tab
            const currentTab = tabs.tabsArr.find((item) => item.path === currentTabPath)
            if (!currentTab) return ''
            // 移除界面显示的左侧tag数组
            tabs.tabsArr = tabs.tabsArr.filter((item) => item.index >= currentTab.index)

            // 确定激活的tab还在不在，在的返回 ''，不在的话返回tab数组的最后一个tab的path
            return _validateActiveTab()
        }
        // 移除右侧
        const removeRight = (currentTabPath: string): string => {
            // 获得当前tab
            const currentTab = tabs.tabsArr.find((item) => item.path === currentTabPath)
            if (!currentTab) return ''
            // 移除界面显示的右侧tab数组
            tabs.tabsArr = tabs.tabsArr.filter((item) => item.index <= currentTab.index)

            // 确定激活的tab还在不在，在的返回 ''，不在的话返回tab数组的最后一个tab的path
            return _validateActiveTab()
        }
        // 移除其他
        const removeOther = (currentTabPath: string): string => {
            // 当前tab
            const currentTab = tabs.tabsArr.find((item) => item.path === currentTabPath)
            if (!currentTab) return ''
            tabs.tabsArr = [currentTab]
            return currentTab.path
        }
        // 移除全部
        const removeAll = () => {
            tabs.tabsArr = []
        }
        // 获得isAffis属性为true的路由
        const _getChildren = (array: RouteRecordRaw[]): RouteRecordRaw | undefined => {
            for (let i = 0; i < array.length; i++) {
                if (array[i].meta?.isAffis) {
                    return array[i]
                } else if (array[i].children !== undefined) {
                    return _getChildren(array[i].children as RouteRecordRaw[])
                }
            }
        }
        // 添加tab
        const _addTab = (route: RouteLocationNormalizedLoadedGeneric | RouteRecordRaw) => {
            const tab: TabItem = {
                index: tabs.tabsArr.length,
                icon: route.meta?.icon,
                title: route.meta?.title as string,
                path: route.path,
                name: route.name as string,
            }
            tabs.tabsArr.push(tab)
        }
        // 验证激活的Tab还在不在
        const _validateActiveTab = (): string => {
            // 确定激活的tag还在不在
            const activetabIndex = tabs.tabsArr.findIndex((item) => item.path === tabs.activetabPath)
            // 如果在的话，则返回
            if (activetabIndex >= 0) return ''
            // 不在的话，获得tag数组的最后一个tag
            const goTab = tabs.tabsArr[tabs.tabsArr.length - 1]
            return goTab.path
        }
        return { tabs, setFullScreen, addTab, initTabs, removeCurrent, removeLeft, removeRight, removeOther, removeAll }
    },
    {
        persist: true,
    },
)
